<template>
  <div class="bussiness">
    <van-search class="search" shape="round" v-model.trim="keyword" placeholder="请输入商机内容" @input="getBussinessList">
      <template slot="left">
        <van-dropdown-menu active-color="#FE9100">
          <van-dropdown-item :title="getTypeText(type)" ref="dropdownItem" class="type-list">
            <span :class="['type-option', 'van-hairline--surround', type === item.id ? 'active' : '']" v-for="(item, index) in bussinessTypeList" :key="index" @click="chooseType(item.id)">{{ item.text }}</span>
          </van-dropdown-item>
        </van-dropdown-menu>
      </template>
    </van-search>
    <ul class="list" v-if="bussinessList.length">
      <li class="list-option" v-for="(item, index) in bussinessList" :key="index" @click="routerTo(`bussinessDetail?id=${item.id}`)">
        <div class="header">
          <img :src="item.user.headImgUrl" alt="" />
          <div class="right">
            <p>{{ item.user.nickname }}</p>
            <p>{{ item.user.company }}</p>
          </div>
        </div>
        <div class="content">
          <div class="detail van-multi-ellipsis--l2">
            <span class="type">{{ getTypeText(item.type) }}</span>
            <span>{{ item.content }}</span>
          </div>
          <div class="tag-list" v-if="item.labelList && item.labelList.length">
            <span v-for="(todo, k) in item.labelList" :key="k">{{ todo }}</span>
          </div>
          <div class="img-list" v-if="item.pictureList.length">
            <van-image fit="cover" @click.stop="previewImg(index, k)" v-for="(todo, k) in item.pictureList" :key="k" :src="todo" width="100" height="100" />
          </div>
        </div>
        <div class="footer van-hairline--top">
          <span>阅读 {{ item.readNum }}</span>
          <ul>
            <li @click.stop="handleCollect(item, index)">
              <span :style="{ color: item.isCollect ? '#fe9100' : '' }">{{ item.isCollect === 1 ? '取消收藏' : '收藏' }}</span>
              <img v-if="item.isCollect === 1" src="@assets/images/collect_selected.png" alt="" />
              <img v-else src="@assets/images/collect.png" alt="" />
            </li>
            <li @click.stop="deliveryCard(item.id)">
              <span>递名片</span>
              <img src="@assets/images/cooperation.png" alt="" />
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <Empty v-else></Empty>
    <img src="@assets/images/add_icon.png" class="add-btn" @click="addBussiness" alt="" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { DropdownMenu, DropdownItem, Search, Dialog, Toast, Image, ImagePreview } from 'vant';
import Empty from '@components/empty';
import { business_deliveryCard, business_getBusinessList, business_collectBusiness, business_cancelCollect } from '@api/bussiness';
export default {
  components: {
    Empty,
    [Search.name]: Search,
    [Image.name]: Image,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem
  },
  data() {
    return {
      keyword: '',
      type: 0,
      bussinessList: []
    };
  },
  mounted() {
    this.getBussinessList();
  },
  computed: {
    ...mapGetters(['bussinessTypeList'])
  },
  methods: {
    addBussiness() {
      if (!this.$store.state.token) {
        Dialog.confirm({
          title: '您还未实名，是否立即进行实名',
          confirmButtonColor: '#f09637',
          confirmButtonText: '立即实名',
          cancelButtonText: '暂不实名'
        }).then(() => {
          this.$router.openPage('/login');
        });
      } else {
        this.routerTo('/bussinessRelease');
      }
    },
    async handleCollect(item, index) {
      if (!this.$store.state.token) {
        Dialog.confirm({
          title: '您还未实名，是否立即进行实名',
          confirmButtonColor: '#f09637',
          confirmButtonText: '立即实名',
          cancelButtonText: '暂不实名'
        }).then(() => {
          this.$router.openPage('/login');
        });
      } else {
        const businessId = item.id;
        let res = '';
        if (item.isCollect === 1) {
          res = await business_cancelCollect({ businessId });
        } else {
          res = await business_collectBusiness({ businessId });
        }
        if (res.code === 200) {
          this.$set(this.bussinessList[index], 'isCollect', 1 - item.isCollect);
        } else {
          Toast(res.msg);
        }
      }
    },
    getTypeText(type) {
      return this.bussinessTypeList.find(item => {
        return item.id === type;
      }).text;
    },
    deliveryCard(businessId) {
      if (!this.$store.state.token) {
        Dialog.confirm({
          title: '您还未实名，是否立即进行实名',
          confirmButtonColor: '#f09637',
          confirmButtonText: '立即实名',
          cancelButtonText: '暂不实名'
        }).then(() => {
          this.$router.openPage('/login');
        });
      } else {
        Dialog.confirm({
          message: '投递名片将会把您的个人信息\n 发送给对方，是否投递',
          confirmButtonColor: '#f09637'
        }).then(() => {
          business_deliveryCard({ businessId }).then(res => {
            if (res.code === 200) {
              Toast('名片投递成功');
            } else {
              Toast(res.msg);
            }
          });
        });
      }
    },
    async getBussinessList() {
      let res = await business_getBusinessList({ pageNum: 1, pageSize: 100, type: this.type, keyword: this.keyword });
      if (res.code === 200) {
        this.bussinessList = res.data.list;
      } else {
        Toast(res.msg);
      }
    },
    previewImg(index, k) {
      let arr = this.bussinessList[index].pictureList.map(item => {
        return item.split('?')[0];
      });
      ImagePreview({
        images: arr,
        startPosition: k
      });
    },
    chooseType(type) {
      this.type = type;
      this.getBussinessList();
      this.$refs.dropdownItem.toggle();
    }
  }
};
</script>

<style lang="scss" scoped>
.bussiness {
  background: #fff;
}
.search {
  margin-bottom: 20px;
  /deep/ .van-dropdown-menu {
    height: 52px;
    border-radius: 28px;
    background: #f1f1f3;
    padding-right: 30px;
    margin-right: 15px;
    .van-dropdown-menu__title {
      font-size: 26px;
    }
    &:after {
      border-width: 0;
    }
  }
}
/deep/ .van-search {
  .van-search__content {
    background: #f1f1f3;
  }
  .van-cell {
    padding: 2px 0;
    color: #999;
  }
}

.type-list {
  /deep/ .van-dropdown-item__content {
    padding: 15px;
  }
}
.type-option {
  display: inline-block;
  width: 158px;
  height: 56px;
  text-align: center;
  line-height: 56px;
  margin: 15px 12px;
  color: #818b9d;
  font-size: 28px;
  border-radius: 28px;
  &:after {
    border-radius: 56px;
  }
  &.active {
    background: #fe9100;
    color: #fff;
    &:after {
      border-color: #fe9100;
    }
  }
}
.list {
  padding: 0 30px;
  &-option {
    margin-bottom: 36px;
    .header {
      display: flex;
      align-items: center;
      img {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        margin-right: 18px;
      }
      .right {
        font-size: 22px;
        color: #818b9d;
        p:first-child {
          font-size: 28px;
          font-weight: bold;
          color: #121c32;
          margin-bottom: 13px;
        }
      }
    }
    .content {
      margin: 25px 0;
      .img-list {
        display: flex;
        flex-wrap: wrap;
        .van-image {
          margin: 0 15px 15px 0;
        }
      }
      .detail {
        color: #121c32;
        font-size: 30px;
        line-height: 46px;
      }
      .type {
        background: #f4be88;
        width: 108px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        display: inline-block;
        color: #53360e;
        font-size: 22px;
        border-radius: 3px;
        margin-right: 20px;
      }
      .tag-list {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
        span {
          padding: 8px 18px;
          color: #35a6fb;
          background: #ebf7fd;
          border-radius: 18px;
          font-size: 22px;
          margin: 15px 15px 0 0;
        }
      }
    }
    .footer {
      display: flex;
      justify-content: space-between;
      font-size: 22px;
      color: #818b9d;
      padding: 24px 0;
      ul {
        display: flex;
        li {
          display: flex;
          align-items: center;
          margin-left: 24px;
        }
        img {
          width: 24px;
          margin-left: 10px;
        }
      }
    }
  }
}
.add-btn {
  position: fixed;
  bottom: 170px;
  right: 46px;
  width: 86px;
  height: 86px;
}
</style>
